import { type PropType, defineComponent,useAttrs} from 'vue'
import type { menuItem } from './type'
import { toLine } from '../../../utils'
import * as Icons from '@element-plus/icons'
export default defineComponent({
	props:{
		data:{
			type:Array as PropType<menuItem[]>,
			require:true
		},
		// 默认选中的菜单
		defaultActive:{
			type:String,
			default:''
		},
		// 是否是路由模式
		router:{
			type:Boolean,
			default:false
		},
		//使用自定义的数据结构进行菜单处理
		name:{
			type:String,
			default:'name'
		},
		index:{
			type:String,
			default:'index'
		},
		icon:{
			type:String,
			default:'icon'
		},
		children:{
			type:String,
			default:'children'
		}
	},
	setup(props,ctx){
		// 接收父组件传过来的值，并进行绑定
		let attrs=useAttrs()
		// 封装一个渲染无限层级菜单的方法
		// 函数会返回一段jxs的代码
		let renderMenu=(data:any[])=>{
			return data.map((dataI:any)=>{
				// 每个菜单的图标
				// dataI.i=`el-icon${toLine(dataI.icon!)}`
				// tsx里要使用原生的,不能再进行转化
				dataI.i=(Icons as any)[dataI[props.icon]!]
				let slot={
					title:()=>{
						return <>
								<dataI.i/>
								<span>{dataI[props.name]}</span>
							</>
					}
				}
				// 递归渲染子菜单
				if (dataI[props.children] && dataI[props.children].length){
					return(
					<el-sub-menu index={dataI[props.index]} v-slots={slot}>
						{renderMenu(dataI[props.children])}
					</el-sub-menu>
					)
				}
				// 正常渲染没有子菜单的菜单
				return (
				<el-menu-item index={dataI[props.index]}>
					<dataI.i/>
					<span>{dataI[props.name]}</span>
				</el-menu-item>
				)
			})
		}
		return()=>{
			return(
			<el-menu 
			default-active="{props.defaultActive}" 
			router="{props.router}"
			{...attrs}>
				{renderMenu(props.data)}
			</el-menu>
			)
		}
	}
})